import React from 'react'
import {
    Table,
    Input, 
    Button, 
    Icon
} from 'antd'
import { Resizable } from 'react-resizable';
import Highlighter from 'react-highlight-words';
import './index.css'

const ResizeableTitle = props => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

class TyTable extends React.Component {
    state = {
        columns: this.columns,
        pageSize: 5,
        payload: {
            pageNum: 1,
            pageSize: 5
        }
    };

    delete = (text, record, index) => {
        console.log('text======>', text);
        console.log('record======>', record);
        console.log('index======>', index);

        const list = this.data;
        list.splice(record, 1)
        this.setState({
            list
        });
    };

    getColumnSearchProps = dataIndex => ({
        filterDropdown: ({
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters
        }) => ( 
            <div style = {{ padding: 8 }} >
                <Input ref = {
                        node => {
                            this.searchInput = node;
                        }
                    }
                    placeholder = {
                        `Search ${dataIndex}`
                    }
                    value = {
                        selectedKeys[0]
                    }
                    onChange = {
                        e => setSelectedKeys(e.target.value ? [e.target.value] : [])
                    }
                    onPressEnter = {
                        () => this.handleSearch(selectedKeys, confirm)
                    }
                    style = {
                        {
                            width: 188,
                            marginBottom: 8,
                            display: 'block'
                        }
                    }
                /> 
                <Button type = "primary"
                    onClick = {
                        () => this.handleSearch(selectedKeys, confirm)
                    }
                    icon = "search"
                    size = "small"
                    style = {
                        {
                            width: 90,
                            marginRight: 8
                        }
                    } >
                    Search 
                </Button> 
                <Button onClick = {
                    () => this.handleReset(clearFilters)
                }
                size = "small"
                style = {
                    {
                        width: 90
                    }
                } >
                    Reset 
                </Button> 
            </div>
        ),
        filterIcon: filtered => ( <
            Icon type = "search"
            style = {
                {
                    color: filtered ? '#1890ff' : undefined
                }
            }
            />
        ),
        onFilter: (value, record) =>
            record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
            if (visible) {
                setTimeout(() => this.searchInput.select());
            }
        },
        render: text => ( <
            Highlighter highlightStyle = {
                {
                    backgroundColor: '#ffc069',
                    padding: 0
                }
            }
            searchWords = {
                [this.state.searchText]
            }
            autoEscape textToHighlight = {
                text.toString()
            }
            />
        ),
    });

    handleSearch = (selectedKeys, confirm) => {
        confirm();
        this.setState({
            searchText: selectedKeys[0]
        });
    };

    handleReset = clearFilters => {
        clearFilters();
        this.setState({
            searchText: ''
        });
    };

    components = {
        header: {
            cell: ResizeableTitle,
        }
    };

    columns = [{
            title: 'Date',
            dataIndex: 'date',
            width: 200,
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            width: 100,
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.amount - b.amount,
        },
        {
            title: 'Type',
            dataIndex: 'type',
            width: 100,
            filters: [{
                    text: '高',
                    value: '高',
                },
                {
                    text: '中',
                    value: '中',
                },
                {
                    text: '低',
                    value: '低',
                }
            ],
            filterMultiple: false,
            onFilter: (value, record) => record.type.indexOf(value) === 0

        },
        {
            title: 'Note',
            dataIndex: 'note',
            width: 100,
            ...this.getColumnSearchProps('note'),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record, index) =>
                <Button type = "primary"
                    onClick = {
                        this.delete.bind(text, record, index)
                    } > 删除 </Button>,
        },
    ]

    data = [{
            key: 0,
            date: '2018-02-11',
            amount: 120,
            type: '高',
            note: 'a1',
        },
        {
            key: 1,
            date: '2018-03-11',
            amount: 243,
            type: '中',
            note: 'a2',
        },
        {
            key: 3,
            date: '2018-03-13',
            amount: 523,
            type: '中',
            note: 'a2',
        },
        {
            key: 2,
            date: '2018-04-11',
            amount: 98,
            type: '低',
            note: 'a3',
        },
        {
            key: 4,
            date: '2018-02-11',
            amount: 120,
            type: '高',
            note: 'a1',
        }, {
            key: 5,
            date: '2018-03-11',
            amount: 243,
            type: '中',
            note: 'a2',
        }, {
            key: 6,
            date: '2018-03-13',
            amount: 523,
            type: '中',
            note: 'a2',
        }, {
            key: 7,
            date: '2018-04-11',
            amount: 98,
            type: '低',
            note: 'a3',
        },
        {
            key: 8,
            date: '2018-02-11',
            amount: 120,
            type: '高',
            note: 'a1',
        }, {
            key: 10,
            date: '2018-03-11',
            amount: 243,
            type: '中',
            note: 'a2',
        }, {
            key: 11,
            date: '2018-03-13',
            amount: 523,
            type: '中',
            note: 'a2',
        }, {
            key: 12,
            date: '2018-04-11',
            amount: 98,
            type: '低',
            note: 'a3',
        },
        {
            key: 13,
            date: '2018-02-11',
            amount: 120,
            type: '高',
            note: 'a1',
        }, {
            key: 14,
            date: '2018-03-11',
            amount: 243,
            type: '中',
            note: 'a2',
        }, {
            key: 15,
            date: '2018-03-13',
            amount: 523,
            type: '中',
            note: 'a2',
        }, {
            key: 16,
            date: '2018-04-11',
            amount: 98,
            type: '低',
            note: 'a3',
        },
        {
            key: 17,
            date: '2018-02-11',
            amount: 120,
            type: '高',
            note: 'a1',
        }, {
            key: 18,
            date: '2018-03-11',
            amount: 243,
            type: '中',
            note: 'a2',
        }, {
            key: 19,
            date: '2018-03-13',
            amount: 523,
            type: '中',
            note: 'a2',
        }, {
            key: 20,
            date: '2018-04-11',
            amount: 98,
            type: '低',
            note: 'a3',
        },
    ];

    handleResize = index => (e, {
        size
    }) => {
        this.setState(({
            columns
        }) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            };
            return {
                columns: nextColumns
            };
        });
    };

    // 回调函数，切换下一页
    changePage(current) {
        console.log('current=>', current)
        const {
            dispatch
        } = this.props;
        const params = {
            pageNum: current,
            pageSize: this.state.pageSize,
        };
        dispatch({
            type: 'lutList/fetch',
            payload: params,
        })
    }

    // 回调函数,每页显示多少条
    changePageSize(pageSize, current) {

         // 将当前改变的每页条数存到state中
         this.setState({
             pageSize: pageSize,
         });

         // 向后台请求
         const {
             dispatch
         } = this.props;
         const params = {
             pageSize: pageSize,
         };
         dispatch({
             type: 'lutList/fetch',
             payload: params,
         })
    }

    render() {
        const columns = this.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
                hideDefaultSelections: true,
            }),
        }

        const page = {
            pageNum: 1,
            total: this.data.length
        }

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: false,
            showTotal: () => `共${50}条`,
            pageSize: this.state.pageSize,
            current: page.pageNum,
            total: page.total,
            /* onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
            onChange: (current) => this.changePage(current) */
        }

        return  <div>
                    <Table bordered 
                        rowSelection = { rowSelection }
                        components = { this.components  }
                        columns = { columns }
                        dataSource = { this.data }
                        pagination = { paginationProps }
                    />;
                </div>
    }
}

export default TyTable